<template>
    <div>
        <ul>
            <li v-for="(item,index) in arr":key="index">
                {{ index }}-{{ item }}
            </li>
        </ul>
        <br>
        <p v-for="(item,index) in obj":key="index">{{ index }}-{{ item }}</p>
        <table border="1">
            <tbody>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                </tr>
                <tr v-for="item in objArr":key="item.id">
                    <th>{{ item.id }}</th>
                    <th>{{ item.name }}</th>
                    <th>{{ item.age }}</th>
                </tr>
            </tbody>
        </table>
        <select>
            <option value="">请选择</option>
            <option v-bind:value="item.id" v-for="item in address">{{ item.name }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import{ref} from 'vue';
let arr = ref([1,2,3,4,5]);
let obj=ref({name:"张三",age:"20"});
let objArr=ref([
    {id:1,name:"张三",age:"20"},
    {id:2,name:"李四",age:"20"},
    {id:3,name:"王五",age:"20"}
])
let address =ref([
    {id:1,name:"河北"},
    {id:2,name:"河南"},
    {id:3,name:"山西"},
    {id:4,name:"山东"},
])
</script>

<style scoped>

</style>